<template>
	<view class="login-container">
		<!-- 顶部背景及标题、插画区域 -->
		<view class="top-bg">
			<image class="top-img" src="@/img/00登录_slices/组 6.png"></image>
			<image class="overimage" src="@/img/00登录_slices/组 6(1).png"></image>
			<text class="title">欢迎来到车联网服务平台商家端</text>
		</view>
		<!-- 表单区域 -->
		<view class="form-box">
			<view class="input-item">
				<input class="input" placeholder="账号登陆" v-model="userInfo.username" />
			</view>
			<view class="input-item">
				<input class="input" placeholder="输入密码" v-model="userInfo.password" />
<!-- 				<button class="get-code-btn" @click="getcode">获取验证码</button> -->
			</view>
			<div>
				<input class="input" placeholder="输入验证码" v-model="userInfo.code" />
				<image :src="codeimg" style="width: 300px; height: 100px;" @click="getcode" />
			</div>
			<navigator url="/pages/register/register" class="register-btn">立即注册></navigator>
			<button class="login-btn" @click="tologin">登录</button>
		</view>
		<u-picker :show="show" :columns="columns" @confirm="handleConfirm" @cancel="show = false"></u-picker>
	</view>
</template>

<script>
	import {
		randomUUID
	} from 'crypto';
	import {
		get,
		post,
		put
	} from '../../utils/request.js'
	export default {
		data() {
			return {
				userInfo: {
					username: "",
					password: "",
					sex: '',
					code: '',
					uuid: '',
				},
				codeimg: '',
				captchaEnabled: 'true',
				phone: '', // 绑定的手机号
				code: '', // 绑定的验证码
				show: false,
				merchantNames: [],
				merchant: [],
				verification: [],
				columns: [
					[]
				],
			};
		},
		methods: {
			async getcode() {
				const resp = await get('/dev-api/code', {})
				this.captchaEnabled = resp.captchaEnabled === undefined ? true : resp.captchaEnabled
				if (this.captchaEnabled != null || this.captchaEnabled != '') {
					this.codeimg = "data:image/gif;base64," + resp.img
					this.userInfo.uuid = resp.uuid
				}
			},
			async tologin() {
				const resp = await post('/dev-api/auth/login', this.userInfo)
				if (resp.code == 200) {
					// console.log(resp)
					var token = resp.data.access_token;
					uni.setStorageSync('token', token);
					uni.showLoading({
						// title: '登陆成功'
					});
					setTimeout(async () => {
						uni.showToast({
							title: '登陆成功',
							duration: 2000
						});
						const res = await get('/dev-api/system/user/profile', {})
						// console.log(res)
						const res1 = await get('/dev-api/system/verification/list/sysUserId/' + res.data
							.userId, {})
							this.verification=res1
						// console.log(res1)
						for (let i = 0; i < res1.length; i++) {
							const merchantInfo = await get('/dev-api/system/merchant/' + res1[i].mid, {})
							this.merchant.push(merchantInfo.data)
							if (merchantInfo) {
								this.merchantNames.push(merchantInfo.data.name);
							}
						}
						// console.log(this.merchantNames)
								this.columns = [this.merchantNames];
								// console.log(this.columns)
								uni.showToast({
									title: '登陆成功',
									icon: 'success'
								});
								uni.setStorageSync(this.phone, 0)
								this.show = true;
					}, 2000);
				} else {
					uni.showToast({
						title: resp.msg,
						icon: "error",
						duration: 2000
					});
					this.getcode()
				}

			},
			async handleConfirm(row){
				this.merchantNames=[]
				const merchant1  = this.merchant.find(item => item.name == row.value[0]);
				const verification  = this.merchant.find(item => item.name == row.value[0]).id;
				const verification1 = this.verification.find(item => item.mid == verification);
				const merchantimg=await get('/dev-api/system/imgs/list/sysUserId/'+merchant1.id,{})
				const img  = merchantimg.find(item => item.mid == verification)
				console.log(img)
				uni.setStorageSync('merchant',merchant1)
				uni.setStorageSync('verification',verification1)
				uni.setStorageSync('merchantimg',img)
				uni.navigateTo({
					url:'/pages/homepage/homepage'
				})
			},
		},
		onLoad() {
			this.getcode()
		}
	}
</script>

<style scoped>
	.login-container {
		display: flex;
		flex-direction: column;
		height: 100%;
		background-color: #fff;
	}

	.top-bg {
		width: 100%;
		height: 400rpx;
		background: linear-gradient(to right, #3399ff, #66b3ff);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		position: relative;
	}

	.top-img {
		width: 100%;
		height: 400rpx;
	}

	.overimage {
		position: absolute;
		width: 40%;
		height: 200rpx;
		margin-top: 150rpx;
		z-index: 2;
	}

	.title {
		position: absolute;
		margin-top: -150rpx;
		font-size: 36rpx;
		color: #fff;
		font-weight: bold;
	}

	.form-box {
		height: 100%;
		width: 100%;
		padding: 70rpx;
		margin-top: 300rpx;
		position: absolute;
		z-index: 1;
		background-color: #fff;
		box-sizing: border-box;
		border-radius: 50rpx 50rpx 0 0;
		/* 仅顶部圆角，贴合设计 */
		overflow: hidden;
		/* 防止子元素溢出破坏圆角 */
	}

	.input-item {
		display: flex;
		align-items: center;
		border-bottom: 1px solid #eee;
		padding: 20rpx 0;
	}

	.input {
		flex: 1;
		height: 60rpx;
		font-size: 28rpx;
	}

	.get-code-btn {
		width: 200rpx;
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
		background-color: #66b3ff;
		color: #fff;
		font-size: 26rpx;
		border-radius: 10rpx;
	}

	.register-btn {
		font-size: 28rpx;
		color: #3399ff;
		margin: 20rpx 0;
		display: block;
	}

	.login-btn {
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		background-color: #3399ff;
		color: #fff;
		font-size: 32rpx;
		border-radius: 10rpx;
	}
</style>